<template>
  <div class="containers">
    <div class="container">
      <div class="handle-box">
       <el-select v-model="code" @change="getData" placeholder="请选择类型" size="mini" class="mr10">
        <el-option  label="全部" :value="''"></el-option>
          <el-option v-for="(item, index) in codelist" :key="index" :label="item" :value="index">
          </el-option>
        </el-select>
       <el-select v-model="state" @change="getData" placeholder="请选择状态" size="mini" class="mr10">
        <!-- <el-option  label="全部" :value="''"></el-option> -->
          <el-option v-for="(item, index) in statelist" :key="index" :label="item" :value="index" v-if="index!=0">
          </el-option>
        </el-select>
       <el-select v-model="pay_type" @change="getData" placeholder="请选择支付方式" size="mini" class="mr10">
        <el-option  label="全部" :value="''"></el-option>
          <el-option v-for="(item, index) in pay_typelist" :key="index" :label="item" :value="index" v-if="index!=0">
          </el-option>
        </el-select>
         <el-date-picker class="mr10"
      v-model="value2"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      size="mini"
      align="right" @change="changeTime">
    </el-date-picker>
        <el-input v-model="keyword" placeholder="关键字/电话/名字" class="handle-input mr10" size="mini"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="getData" class="mr10" size="mini">搜索</el-button>
        <el-button type="primary" @click="exportExcel" class="mr10" size="mini">导出</el-button>

      </div>
      <!-- <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选
      </el-checkbox>
      <div class="handle-box">

        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="detailed" size="small" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="item in detailedlist" :label="item[0]"
            :key="item[0]">{{ item[1] }}</el-checkbox>
        </el-checkbox-group>
      </div> -->
      <el-table :data="tableData" class="table" ref="multipleTable" header-cell-class-name="table-header" border size="mini" :height="$tableHight"
        @selection-change="handleSelectionChange" v-loading="loading" id="out-table">
        <el-table-column type="index" width="55" label="序号" align="center"></el-table-column>
        <el-table-column prop="user.nickname" label="用户"></el-table-column>
        <el-table-column prop="user.mobile" label="用户电话"></el-table-column>
        <el-table-column prop="pay_money" label="金额"></el-table-column>

        <!-- <el-table-column prop="source.nickname" label="来源用户"></el-table-column>
        <el-table-column prop="source.mobile" label="来源用户电话"></el-table-column> -->
        <el-table-column label="类型" align="center">
          <template slot-scope="scope">
            {{ codelist[scope.row.code] }}
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            {{statelist[scope.row.state]}}
          </template>
        </el-table-column>
        <el-table-column label="支付类型" align="center">
          <template slot-scope="scope">
            {{pay_typelist[scope.row.pay_type]}}
          </template>
        </el-table-column>

        <el-table-column label="时间" align="center">
          <template slot-scope="scope">
            {{$clearTimer(scope.row.CreatedAt)}}
          </template>
        </el-table-column>

      </el-table>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange" :current-page="query.pageIndex"
          :page-sizes="[20, 30, 40, 50]" :page-size="query.pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: 'basetable',
  data() {
    return {
      query: {
        pageIndex: 1,
        pageSize: 20
      },
      tableData: [],
      pageTotal: 0,
      keyword: '',//搜索关键字/电话/名字
      loading: false,
      detailed: [],//detailed类型
      detailedlist: [],//detailed类型

      checkAll: false,
      isIndeterminate: true,
      wallet_type: -1,//余额类型
      wallet_typelist: [{ name: "全部", id: -1 }, { name: "余额", id: 0 }, { name: "积分", id: 1 }, { name: "通证", id: 2 }],
      code:'',
      state:1,
      pay_type:'',
      codelist:['充值','提现','购买商品','扫码付款','退款'],
      statelist:['待审核','初审通过','终审通过','下发中','失败'],
      statelists:[{name:'待审核',id:0},{name:'初审通过',id:1},{name:'终审通过',id:2},{name:'下发中',id:3},{name:'失败',id:4}],
      pay_typelist:['微信','支付宝','银行卡'],
      walletList:{},
      pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
      value2: '',
      start_time:'',
      end_time:''
    };
  },
  created() {
    try {
      this.keyword=this.$route.query.mobile ? this.$route.query.mobile : ''
    } catch (error) {

    }
    this.load()
  },
  methods: {
    exportExcel () {//导出
			var xlsxParam = { raw: true };//转换成excel时，使用原始的格式
			var wb = XLSX.utils.table_to_book(document.querySelector("#out-table"), xlsxParam);
			var wbout = XLSX.write(wb, {
					bookType: "xlsx",
					bookSST: true,
					type: "array"
			});
			try {
					FileSaver.saveAs(
							new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
							"钱包记录.xlsx"
					);
			} catch (e) {
					if (typeof console !== "undefined") console.log(e, wbout);
			}
			return wbout;
			},

    load(){
      let that=this
      this.request('admin/wallet/', 'get').then(
          res => {
            this.walletList = res.data.wallet
            let list=res.data.wallet
            for(let i in list){
              that.detailed.push(list[i].detailed)
              that.detailedlist.push([list[i].detailed,list[i].detaileds])
            }
            this.getData()
          },
          function () {
          console.log('请求失败处理');
          }
      );
    },
    gettype(detailed){
      let str =""
      this.walletList
      for(let i in this.walletList){
        if(this.walletList[i].detailed==detailed){
          return this.walletList[i].detaileds
        }
      }
    },
    handleCheckAllChange(val) {//全选
      this.detailed = [];
      if (val) {
        this.detailedlist.forEach(f => {
          this.detailed.push(f[0]);
        });
      }
      this.isIndeterminate = false;
      this.getData()
    },
    handleCheckedCitiesChange(value) {//多选变化
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.detailedlist.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.detailedlist.length;
      this.query.pageIndex = 1;
      this.getData()
    },
    //修改size值
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.pageSize = val
      this.getData();
    },

    //获取数据
    getData() {
      // this.tableData=[]
      //start_time:this.start_time,end_time:this.end_time, keyword: this.keyword, wallet_type: this.wallet_type , detailed:JSON.stringify(this.detailed)
      this.loading = true
      console.log(this.detailed)
      this.request('admin/cashRecordRecords/', 'get',
      {start_time:this.start_time,end_time:this.end_time, page: this.query.pageIndex, size: this.query.pageSize, keyword: this.keyword, code: this.code, state: this.state, pay_type: this.pay_type}
      ).then(res => {
        this.tableData = res.data.data
        this.pageTotal = res.data.total
        this.loading = false
      })
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, 'pageIndex', val);
      this.getData();
    },
    changeTime(e){//时间
      try {
        this.start_time=this.formatDate(e[0])
        this.end_time=this.formatDate(e[1])
      } catch (error) {
        this.start_time=''
        this.end_time=''
      }
      this.getData()
    },
    formatTen(num) {
        return num > 9 ? (num + "") : ("0" + num);
    },
    formatDate(date) {
        var date = new Date(date)
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var day = date.getDate();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        return year + "-" + this.formatTen(month) + "-" + this.formatTen(day)+ " " +this.formatTen(hour)+ ":" +this.formatTen(minute)+ ":" +this.formatTen(second);
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.el-upload--text {
  width: 200px !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;

  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  /* width: 100px; */
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100%;
  height: 178px;
  display: block;
}

.handle-box {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 60px;
  height: 60px;

  .el-image img {
    object-fit: cover;
  }
}

/* 设置分页按钮样式 */
.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
/* 使用 /deep/ 或 >>> 来穿透 scoped 样式 */
::v-deep .el-table th.el-table__cell {
  background-color: #f2f2f2;
  /* 设置表头颜色 */
  color: #333;
  /* 设置表头文字颜色 */
}

</style>
